<%@ page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootshop online Shopping cart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
<!--Less styles -->
   <!-- Other Less css file //different less files has different color scheam
	<link rel="stylesheet/less" type="text/css" href="${path}/themes/less/simplex.less">
	<link rel="stylesheet/less" type="text/css" href="${path}/themes/less/classified.less">
	<link rel="stylesheet/less" type="text/css" href="${path}/themes/less/amelia.less">  MOVE DOWN TO activate
	-->
	<!--<link rel="stylesheet/less" type="text/css" href="${path}/themes/less/bootshop.less">
	<script src="${path}/themes/js/less.js" type="text/javascript"></script> -->
	
<!-- Bootstrap style --> 
    <link id="callCss" rel="stylesheet" href="${path}/themes/bootshop/bootstrap.min.css" media="screen"/>
    <link href="${path}/themes/css/base.css" rel="stylesheet" media="screen"/>
<!-- Bootstrap style responsive -->	 
	<link href="${path}/themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
	<link href="${path}/themes/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- Google-code-prettify -->	
	<link href="${path}/themes/js/google-code-prettify/prettify.css" rel="stylesheet"/>
<!-- fav and touch icons -->
    <link rel="shortcut icon" href="${path}/themes/images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="${path}/themes/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${path}/themes/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${path}/themes/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="${path}/themes/images/ico/apple-touch-icon-57-precomposed.png">
	<style type="text/css" id="enject"></style>
  </head>
<body>
<jsp:include page="header.jsp"/>
<!-- Header End====================================================================== -->
<div id="mainBody">
	<div class="container">
	<div class="row">
<!-- Sidebar ================================================== -->
<jsp:include page="sider.jsp"/>
<!-- Sidebar end=============================================== -->
	<div class="span9">
    <ul class="breadcrumb">
		<li><a href="${pageContext.request.contextPath }/prototype/second">Home</a> <span class="divider">/</span></li>
		<li class="active">Products Name</li>
    </ul>
	<h3> Products Name <small class="pull-right"> ${count } products are available </small></h3>	
	<hr class="soft"/>
	<p>
		Nowadays the lingerie industry is one of the most successful business spheres.We always stay in touch with the latest fashion tendencies - that is why our goods are so popular and we have a great number of faithful customers all over the country.
	</p>
	<hr class="soft"/>
	<form class="form-horizontal span6">
		<div class="control-group">
		  <label class="control-label alignL">Sort By </label>
			<select>
              <option onclick="a()">Product name A - Z</option>
              <option onclick="b()">Product name Z - A</option>
             <!--  <option onclick="c()">Product Stoke</option> -->
              <option onclick="c()">Price Lowest first</option>
            </select>
		</div>
	  </form>
	  
<div id="myTab" class="pull-right">
 <a href="#listView" data-toggle="tab"><span class="btn btn-large"><i class="icon-list"></i></span></a>
 <a href="#blockView" data-toggle="tab"><span class="btn btn-large btn-primary"><i class="icon-th-large"></i></span></a>
</div>
<br class="clr"/>
<div class="tab-content">
	<div class="tab-pane" id="listView">
		<c:forEach items="${products }" var="p">
		<div class="row">	  
			<div class="span2">
				<c:forEach items="${p.pictures }" var="ps">
			  	<c:if test="${ps.cover!=0 }">
				<a href="${pageContext.request.contextPath }/product/details?id=${p.id }"><img src="${path}/${ps.path }" alt=""/></a>
				</c:if>
				</c:forEach>
			</div>
			<div class="span4">
				<h3>New | Available</h3>				
				<hr class="soft"/>
				<h5>${p.name } </h5>
				<p>
				Nowadays the lingerie industry is one of the most successful business spheres.We always stay in touch with the latest fashion tendencies - 
				that is why our goods are so popular..
				</p>
				<a class="btn btn-small pull-right" href="${pageContext.request.contextPath }/product/details?id=${p.id }">View Details</a>
				<br class="clr"/>
			</div>
			<div class="span3 alignR">
			<form class="form-horizontal qtyFrm">
			<h3> $${p.price }</h3>
			<label class="checkbox">
				   Adds product to compair <input type="checkbox" name="check" value="${p.id }"/>
			</label><br/>
			
			  <a href="${pageContext.request.contextPath }/prototype/addcart?id=${p.id }" class="btn btn-large btn-primary"> Add to <i class=" icon-shopping-cart"></i></a>
			  <a href="${pageContext.request.contextPath }/product/details?id=${p.id }" class="btn btn-large"><i class="icon-zoom-in"></i></a>
			
				</form>
			</div>
		</div>
		<hr class="soft"/>
		</c:forEach>
		<input type="button" class="btn btn-large pull-right" onclick="checks()" value="Compair Products"/>
	</div>

	<div class="tab-pane  active" id="blockView">
		<ul class="thumbnails">
			<c:forEach items="${products }" var="p">
			<li class="span3">
			  <div class="thumbnail">
			  	<c:forEach items="${p.pictures }" var="ps">
			  	<c:if test="${ps.cover!=0 }">
				<a href="${pageContext.request.contextPath }/product/details?id=${p.id }"><img src="${path}/${ps.path }" alt=""/></a>
				</c:if>
				</c:forEach>
				<div class="caption">
				  <h5>${p.name }</h5>
				  <p> 
					I'm a paragraph. Click here 
				  </p>
				    <h4 style="text-align:center"><a class="btn" href="${pageContext.request.contextPath }/product/details?id=${p.id }"> <i class="icon-zoom-in"></i></a> 
				    <a class="btn" href="${pageContext.request.contextPath }/prototype/addcart?id=${p.id }">Add to <i class="icon-shopping-cart"></i></a> 
				    <a class="btn btn-primary" href="${pageContext.request.contextPath }/product/details?id=${p.id }">&euro;${p.price }</a>
				    </h4>
				</div>
			  </div>
			</li>
			</c:forEach>
		  </ul>
	<hr class="soft"/>
	</div>
</div>

	<div class="pagination">
			<ul>
			<li><a href="#">&lsaquo;</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">...</a></li>
			<li><a href="#">&rsaquo;</a></li>
			</ul>
			</div>
			<br class="clr"/>
</div>
</div>
</div>
</div>
<!-- MainBody End ============================= -->
<!-- Footer ================================================================== -->
<jsp:include page="footer.jsp"/>
<!-- Placed at the end of the document so the pages load faster ============================================= -->
	<script src="${path}/themes/js/jquery.js" type="text/javascript"></script>
	<script src="${path}/themes/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="${path}/themes/js/google-code-prettify/prettify.js"></script>
	
	<script src="${path}/themes/js/bootshop.js"></script>
    <script src="${path}/themes/js/jquery.lightbox-0.5.js"></script>
	
	<!-- Themes switcher section ============================================================================================= -->
<jsp:include page="theme.jsp"/>
</body>
<script>
	function a(){
		location.href="${pageContext.request.contextPath }/prototype/list1?name=${product }";		
	}
	function b(){
		location.href="${pageContext.request.contextPath }/prototype/list2?name=${product }";	
	}
	function c(){
		location.href="${pageContext.request.contextPath }/prototype/list3?name=${product }";	
	}
	function checks(){
		var a = document.getElementsByName("check");
		var url = "";
		for(var i =0;i<a.length;i++){
			if (a[i].checked) {
				url += a[i].value + ",";
			}
		}
		location.href="${pageContext.request.contextPath }/product/compair?id="+url;
	}
</script>
</html>